import { Card, Spin, Pagination, Image as AntdImage, Carousel, Tree, Space, message, Checkbox, Popconfirm, Dropdown, Menu, Row, Col, List as AntdList } from "antd";
import { useModel } from "umi";
import { List, Button, ButtonGroup, Card as SemiCard } from "@douyinfe/semi-ui";
import { IconPlusCircle, IconRefresh, IconDelete, IconEdit } from "@douyinfe/semi-icons";
import { useReactive } from "ahooks";
import { useEffect } from "react";

import useHelperCommodity from "../helper/useHelperCommodity";
import useHelperCategory from "../helper/useHelperCategory";

import useAllCategories from "../hooks/category/useAllCategories";
import useAllCategoryCommodities from "../hooks/commodity/useAllCategoryCommodities";
import useDeleteCategory from "../hooks/category/useDeleteCategory";
import useDeleteCategoryCommodity from "../hooks/commodity/useDeleteCategoryCommodity";

const DashboardPage = () => {
    const { addCategoryModle, addSubCategoryModle, openEditCategoryModle } = useHelperCategory();
    const { openAddCommodityModal } = useHelperCommodity();
    const { remoteData, platforms, goipfs, windowInnerHeight, transTree } = useModel("global");
    const { categoriesLoading, categories, loadAllcategories } = useAllCategories();
    const { deleteCategory } = useDeleteCategory();
    const { deleteCategoryCommodity } = useDeleteCategoryCommodity();
    const { categoryCommoditiesLoading, categoryCommodities, loadCategoryCommodities } = useAllCategoryCommodities();
    const { defaultImageBase64 } = useModel("global");

    const state = useReactive({
        leftCardWidth: 360,
        totalCount: 0,
        pageSize: 20,
        page: 1,
        selectedClass: null,
    });

    const loadCommodity = async () => {
        loadCategoryCommodities({ selectedClass: state.selectedClass });
    };

    useEffect(() => {
        let selectedClass = categories.find((item) => item.ccUuid === state.selectedClass?.ccUuid);
        !selectedClass && categories.length > 0 && (selectedClass = categories[0]);
        state.selectedClass = selectedClass || {};
    }, [categories]);

    useEffect(() => {
        loadCommodity();
    }, [state.selectedClass, state.page]);

    const cardBodyHeight = windowInnerHeight - 90 - 54 - 20;

    return (
        <Row gutter={10} style={{ padding: 10 }}>
            <Col span={4}>
                <SemiCard
                    title={<span style={{ lineHeight: "32px", paddingLeft: 10, fontSize: 15 }}>品类列表</span>}
                    headerStyle={{ padding: 10 }}
                    shadows="always"
                    bordered={false}
                    size="default"
                    bodyStyle={{ padding: 0, height: cardBodyHeight }}
                    headerExtraContent={
                        <ButtonGroup size={"default"}>
                            <Button icon={<IconPlusCircle />} onClick={() => addCategoryModle({ reloadData: () => loadAllcategories() })}></Button>
                            <Button icon={<IconRefresh />} onClick={() => loadAllcategories()}></Button>
                        </ButtonGroup>
                    }
                >
                    <List
                        loading={categoriesLoading}
                        dataSource={categories}
                        style={{ height: cardBodyHeight - 60, overflow: "auto" }}
                        renderItem={(item, index) => {
                            return item.ccPaid === null ? (
                                <List.Item
                                    className={`list-item ${state.selectedClass?.ccUuid === item?.ccUuid ? "list-item-selected" : ""}`}
                                    onClick={() => (state.selectedClass = item)}
                                    style={{ padding: "12px 12px 12px 24px" }}
                                    main={item?.ccName}
                                    extra={
                                        <ButtonGroup className="bnts">
                                            <Button icon={<IconPlusCircle />} onClick={() => addSubCategoryModle({ item, reloadData: () => loadAllcategories() })} />
                                            <Button icon={<IconEdit />} onClick={() => openEditCategoryModle({ item, reloadData: () => loadAllcategories() })} />
                                            <Button icon={<IconDelete style={{ color: "#E91E63" }} />} onClick={() => deleteCategory(item)} />
                                        </ButtonGroup>
                                    }
                                />
                            ) : (
                                <List.Item
                                    className={`list-item ${state.selectedClass?.ccUuid === item?.ccUuid ? "list-item-selected" : ""}`}
                                    onClick={() => (state.selectedClass = item)}
                                    style={{ padding: "12px 12px 12px 52px" }}
                                    main={item?.ccName}
                                    extra={
                                        <ButtonGroup className="bnts">
                                            <Button icon={<IconEdit />} onClick={() => openEditCategoryModle({ item, reloadData: () => loadAllcategories() })} />
                                            <Button icon={<IconDelete style={{ color: "#E91E63" }} />} onClick={() => deleteCategory(item, loadAllcategories())} />
                                        </ButtonGroup>
                                    }
                                />
                            );
                        }}
                    />
                </SemiCard>
            </Col>

            <Col span={10}>
                <SemiCard
                    title={<span style={{ lineHeight: "32px", fontSize: 15 }}>{state.selectedClass?.ccName ? state.selectedClass.ccName : "全部"} - 商品列表</span>}
                    headerStyle={{ padding: "10px 14px" }}
                    shadows="always"
                    bordered={false}
                    bodyStyle={{ padding: 0, height: cardBodyHeight, overflow: "auto" }}
                    headerExtraContent={
                        <ButtonGroup>
                            <Button icon={<IconPlusCircle />} onClick={openAddCommodityModal}>
                                添加商品
                            </Button>
                        </ButtonGroup>
                    }
                >
                    <AntdList
                        loading={false}
                        grid={{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 3, xl: 3, xxl: 3 }}
                        dataSource={[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]}
                        style={{ padding: 10, height: cardBodyHeight, overflow: "auto" }}
                        renderItem={(item) => {
                            let actions = [
                                <a onClick={() => {}}>
                                    <IconEdit />
                                </a>,
                            ];
                            if (item.ciPust !== true)
                                actions.push(
                                    <Popconfirm title="确认要删除该商品信息吗？" onConfirm={() => deleteCategoryCommodity({ ciUuid: item.ciUuid, ccUuid: state.selectedClass.ccUuid })}>
                                        <IconDelete style={{ color: "#E91E63" }} />
                                    </Popconfirm>
                                );
                            return (
                                <AntdList.Item key={item.ciUuid}>
                                    <Card
                                        title={
                                            <div className="flex-box">
                                                <div>商品名称</div>
                                                <div style={{ fontWeight: 500, fontSize: 12 }}>单位</div>
                                            </div>
                                        }
                                        hoverable
                                        size="small"
                                        style={{ width: "100%" }}
                                        actions={actions}
                                    >
                                        <Card.Meta
                                            style={{ textAlign: "center" }}
                                            title={item.ciAlna}
                                            description={
                                                <div>
                                                    <div style={{ marginTop: 10, marginBottom: 10, width: 120, marginLeft: "auto", marginRight: "auto", border: "1px solid #eee" }}>
                                                        <AntdImage preview width={120} height={120} src={defaultImageBase64} fallback={defaultImageBase64} />
                                                    </div>
                                                    <div style={{ fontSize: 12, display: "flex", justifyContent: "space-around" }}>
                                                        <div>{!item.ciMava ? <span>正常价: ¥ {helper.numberFormat(item.ciMava || 45.55, 2)}</span> : "¥ 45.55"}</div>
                                                        <div>{!item.ciMava ? <span>会员价: ¥ {helper.numberFormat(item.ciMava || 45.55, 2)}</span> : "¥ 45.55"}</div>
                                                    </div>
                                                </div>
                                            }
                                        />
                                    </Card>
                                </AntdList.Item>
                            );
                        }}
                    />
                </SemiCard>
            </Col>

            <Col span={10}>
                <SemiCard
                    title={<span style={{ lineHeight: "32px", fontSize: 15 }}>{state.selectedClass?.ccName ? state.selectedClass.ccName : "全部"} - 服务项目列表</span>}
                    headerStyle={{ padding: "10px 14px" }}
                    shadows="always"
                    bordered={false}
                    bodyStyle={{ padding: 0, height: cardBodyHeight, overflow: "auto" }}
                    headerExtraContent={
                        <ButtonGroup>
                            <Button disabled icon={<IconPlusCircle />}>
                                添加服务项目
                            </Button>
                        </ButtonGroup>
                    }
                >
                    <AntdList
                        loading={false}
                        grid={{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 3 }}
                        dataSource={[]}
                        style={{ padding: 10, height: cardBodyHeight, overflow: "auto" }}
                        renderItem={(item) => {
                            let actions = [
                                <a onClick={() => {}}>
                                    <IconEdit />
                                </a>,
                            ];
                            if (item.ciPust !== true)
                                actions.push(
                                    <Popconfirm title="确认要删除该商品信息吗？" onConfirm={() => {}}>
                                        <IconDelete style={{ color: "#E91E63" }} />
                                    </Popconfirm>
                                );
                            return (
                                <AntdList.Item key={item.ciUuid}>
                                    <Card
                                        title={
                                            <div className="flex-box">
                                                <div>服务项目名称</div>
                                                <div style={{ fontWeight: 500, fontSize: 12 }}>单位</div>
                                            </div>
                                        }
                                        hoverable
                                        size="small"
                                        style={{ width: "100%" }}
                                        actions={actions}
                                    >
                                        <Card.Meta
                                            style={{ textAlign: "center" }}
                                            title={item.ciAlna}
                                            description={
                                                <div>
                                                    <div style={{ marginTop: 10, marginBottom: 10, width: 120, marginLeft: "auto", marginRight: "auto", border: "1px solid #eee" }}>
                                                        <AntdImage preview width={120} height={120} src={defaultImageBase64} fallback={defaultImageBase64} />
                                                    </div>
                                                    <div style={{ fontSize: 12, display: "flex", justifyContent: "space-around" }}>
                                                        <div>{!item.ciMava ? <span>正常价: ¥ {helper.numberFormat(item.ciMava || 45.55, 2)}</span> : "¥ 45.55"}</div>
                                                        <div>{!item.ciMava ? <span>会员价: ¥ {helper.numberFormat(item.ciMava || 45.55, 2)}</span> : "¥ 45.55"}</div>
                                                    </div>
                                                </div>
                                            }
                                        />
                                    </Card>
                                </AntdList.Item>
                            );
                        }}
                    />
                </SemiCard>
            </Col>
        </Row>
    );
};

export default DashboardPage;
